import React, { Component } from 'react';
import { View, FlatList } from 'react-native';
import { px2dp } from 'bee/utils/px2dp';
import { colors } from 'bee/themes';
import { Header, InsuranceItem } from 'bee/components/MakePlan';
import styles from 'bee/containers/MakePlan/styles';

// @flow
type Props = {
  selectIndex: number,
  selectPlan: Function,
  data: Array,
  close: Function,
};

export default class Coverges extends Component<Props> {
  constructor() {
    super();

    this.renderItem = this.renderItem.bind(this);
  }

  renderItem({ item, index }) {
    return (
      <InsuranceItem
        text={item.name}
        isSelected={index === this.props.selectIndex}
        index={index}
        onPress={this.props.selectPlan}
      />
    );
  }

  render() {
    return (
      <View>
        <Header title="险种名称" close={this.props.close} />
        <FlatList
          style={{ backgroundColor: colors.white, maxHeight: px2dp(780) }}
          data={this.props.data}
          renderItem={this.renderItem}
          ItemSeparatorComponent={() => <View style={styles.itemSeparator} />}
        />
      </View>
    );
  }
}
